﻿

/* STATEMENT MODULES */
.iconified-statement {
    margin: 35px 0 35px 0;

    &:first-child {
        margin-top: 0;
    }

    .statement-icon, .statement-img, .statement-body {
        display: block;
    }

    .statement-body {
        padding-bottom: 30px;
    }

    .statement-icon {
        text-align: center;
        padding: 50px 0;

        .icon-helper {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

        .icon {
            color: @gray-light;
            font-size: 8em;
            position: static; // fix for Safari
            vertical-align: middle;
        }
    }

    a {
        * {
            color: @text-color;
        }

        h1, h2, h3 {
            color: @gray-darker;
        }

        &:hover {
            text-decoration: none;

            * {
                color: @brand-primary;
            }

            .icon {
                text-decoration: none;
            }
        }
    }
}
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
    .three-columns .iconified-statement, .two-columns .iconified-statement {
        width: 100%;
        display: inline-block;
        overflow: hidden;
        margin: 0;

        .statement-img {
            overflow: hidden;
        }

        .statement-icon {
            height: 250px;
            padding: 0px;
        }
    }
}

@media (min-width: @screen-md-min) {
    .three-columns .iconified-statement, .two-columns .iconified-statement {
        .statement-icon {
            // height: 300px;
        }
    }
}



.statement {
    padding: 65px 0;
    position: relative;

    h1, h2, h3, h4 {
        color: inherit;
    }

    &.bg-primary em {
        color: @gray-darker;
    }

    &.bg-info {
        color: @gray-darker;

        .btn-default {
            background: darken(@btn-default-bg, 5%);
        }
    }

    &.bg-dark {
        background: @gray-darker;
        color: @gray-lighter;

        em {
            color: @brand-primary;
        }
    }

    .container > *:first-child {
        margin-top: 0px;
    }

    .iconified-statement {
        background: #fff;

        .statement-header, .statement-body {
            padding-left: 35px;
            padding-right: 35px;
        }
    }
}


.image-and-text-content {
    border-bottom: 1px solid @gray-lighter;
    padding-top: 80px;


    .image-content {
        text-align: center;

        img {
            .img-responsive();
        }
    }

    .text-content {
        position: relative;

        h1, h2, h3 {
            margin-bottom: 20px;
        }

        .btn {
            margin-top: 20px;
        }
    }
    .text-content-inner {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        line-height: 1.6;
        > *:first-child {
            margin-top: 0;
        }
    }
}

.content-column .statement .container, .content-column .image-and-text-content .container {
    .container-fluid();
    width: auto;
}
